<template>
	<div class="app">
		<!-- <h2>App当前计数(computed做法): {{ storeCounter }}</h2> -->
		<!-- <h2>App当前计数: {{ $store.state.counter }}</h2> -->
		<h2>App当前计数: {{ counter }}</h2>
		<button @click="increment">+1</button>
		<hr />

		<home />
	</div>
</template>

<script>
	export default {
		computed: {
			storeCounter() {
				return this.$store.state.counter
			},
		},
	}
</script>

<script setup>
	import Home from '@/views/Home'
	import { toRefs } from 'vue'
	import { useStore } from 'vuex'

	const store = useStore()
	const { counter } = toRefs(store.state)

	function increment() {
		store.commit('increment')
	}
</script>

<style></style>
